<template>
    <div ref="chart" style="height: 300px;"></div> <!-- 柱状图容器 -->
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';  // 引入ECharts库

const props = defineProps({
    data: Object,  // 接收父组件传递的柱状图数据
});

const chart = ref(null);  // 柱状图DOM元素引用

onMounted(() => {
    const myChart = echarts.init(chart.value);  // 初始化ECharts实例

    // 配置项
    const option = {
        xAxis: {
            type: 'category',
            data: props.data.days,
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: props.data.values,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)',
                },
            },
        ],
    };

    myChart.setOption(option);  // 设置图表选项
});
</script>